<extend name="Layout/index"/>
<block name="link">
        <link href="__PUBLIC__/component/bootstrap-fileinput-master/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="__PUBLIC__/component/bootstrap-fileinput-master/js/fileinput.js" type="text/javascript"></script>
         <script src="__PUBLIC__/component/bootstrap-fileinput-master/js/locales/zh.js" type="text/javascript"></script>
       <style>
       	.add-goods-step {
			    font-size: 0;
			    background-color: #FFF;
			    *word-spacing: -1px;
			    margin: 0 0 20px 20px;
			    overflow: hidden;
		}
	
		.add-goods-step li {
		    color: #CCC;
		    vertical-align: top;
		    letter-spacing: normal;
		    word-spacing: normal;
		    display: inline-block;
		    width: 100%;
		    height: 50px;
		    position: relative;
		    z-index: 1;
		    float: left;
		}
		.add-goods-step li{
			width:262px;
			float:left;
			height:72px;
		}
		.add-goods-step li.current, .style-seller .add-goods-step li.current h2 {
   			 color: #1ABC9C !important;
		}
		.goods-spec .simple-form-field.spec-title-box {
		    padding-top: 0;
		    padding-bottom: 5px;
		    background: #22BAA0;
		    border: 1px solid #22BAA0;
		    border-bottom: 0px;
		    color: #fff;
		    border-bottom: 0px;
		    font-weight: 700;
		}
		h2 {
			font-size:20px;
		}

		body, td, input, textarea, select, button{
    color: #666;
    font-size: 12px;
    font-family: "Microsoft Yahei", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
}
    .clear{
    	clear:both;
    }
    .page-header {padding-bottom: 9px;border-bottom: 1px solid #eee;}
}
.file-error-message{
	background-color: #f2dede;
    margin: 5px;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    padding: 15px;
    z-index: 10000;
    position: absolute;
}

       </style>
</block>	
<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active"配置管理</li>
</block>

<block name="breadcrumb-02">
	<ul class="add-goods-step">
	<li id="step_2" >
		<i class="glyphicon glyphicon-edit"></i>
		<!-- <img src="__PUBLIC__/Home/img/setup1.jpg" alt=""> -->
		<h6>STEP.1</h6>
		<h2>填写商品详情</h2>
		<i class="fa fa-angle-right"></i>
	</li>
	<li id="step_3" class="current">
		<i class="fa fa-image step"></i>
		<h6>STEP.2</h6>
		<h2>上传商品图片</h2>
		<i class="fa fa-angle-right"></i>
	</li>
	<li id="step_4">
		<i class="fa fa-check-square-o step"></i>
		<h6>STEP.3</h6>
		<h2>商品发布成功</h2>
	</li>
	<div class="clear"></div>
</ul>
</block>


<block name="main">
 <div class="container kv-main" style="width:940px;height:600px" data-spuid="<{$spuid}>">
         <form enctype="multipart/form-data">
            <input id="file-0a" class="file" type="file" multiple data-min-file-count="1"  data-max-file-count="6" name="photo">
            <br>
        </form>
</div>

 <div class="goods-next text-center" style="margin-top:100px">
					
					<!-- <input id="btn_publish" value="下一步，发布商品" class="btn btn-success" type="submit"> -->
					
					<!--不可点击状态的下一步-->
					<button class="btn btn-default">下一步，发布商品</button>
				</div>
</block>



<block name="end">
<script>
$('#file-0a').fileinput({
        language: 'zh',
        uploadUrl: '<{:U("Goods/addPhoto")}>',
        allowedFileExtensions : ['jpg', 'png','gif','jpeg'],
        showClose :false,
        showUploadedThumbs :false,
        uploadExtraData:{spuid:$('.kv-main').data('spuid')}
    });

$('#file-0a').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
     $('.goods-next').find('button').removeClass('btn-default').addClass('btn-success');
 
});

$('#file-0a').on('fileuploaderror', function(event, data, msg) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
   alert(msg);
});
	$('.page-header').css({
		'margin':0
	})
    function ajaxGetPropery(cid){
    	$.ajax({
    		url:'<{:U("Goods/getidProperty")}>',
				type:'post',
				data:{cid:cid},
				beforeSend:function(){
					$('#loading').show();
				},
				success:function(data){
					$('#loading').hide();
					$('#propertyChBox').html(data);
				},
			async:true,
    	})
    }
 
    ajaxGetPropery($('.catSelect').find(':selected').val());
	$('.catSelect').find('option:disabled').css({
		color:'#5286F0'
	})

	$('.catSelect').find('option:not(:disabled)').css({
		color:'blue'
	})

	/**
	 * 上传图片之后实时显示上传的图片
	 */
	$('#info_photo').change(function(){
		var reader = new FileReader(),
		file = $(this).get(0).files[0];

		//检测是不是图片类型
		if(!/^image\/.*/ig.test(file.type)){
			$(this).parent().next().show();
		}else{
			$(this).parent().next().hide();
			reader.readAsDataURL(file);
		}

		reader.onload = function(){
			$('#goods_image_tag').attr('src',reader.result);
			
		}
	
	})


	$('.goods-next').click(function(event){
		var	ev = window.event || event,
		target = ev.srcElement || ev.target;
		if($(target).find('button.btn-default').length==1){
			return false;
		}else{
			alert('成功添加商品！');
			location.href= '<{:U("Goods/index")}>';
		}
	})


</script>	
</block>
